<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style>
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">反馈列表</h1>
		</header>
		<div class="mui-content">
			<div id="load">
				<ul class="mui-table-view" id="content">

				</ul>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/config.js"></script>
	<script src="../js/date.js"></script>
	<script>
		var page = 1;
		mui.init({
			pullRefresh: {
				container: '#load', //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				up: {
					height: 50, //可选.默认50.触发上拉加载拖动距离
					auto: false, //可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			}
		});
		mui.plusReady(function() {
			getData();
		});

		function getData() {
			mui.ajax(config.config.path + '/feedback/page?page=' + page + '&limit=' + (config.config.bookPageSize*2) +
				'&sort=desc&sort_column=create_time', {
					data: {

					},
					type: "POST",
					contentType: 'application/json;charset=utf-8',
					dataType: "json",
					success: function(result) {
						var code = result.code;
						if (code == 200) {
							var table = document.body.querySelector('#content');
							if (result.data.records.length > 0) {
								for (j = 0, len = result.data.records.length; j < len; j++) {
									var deviceNum = result.data.records[j].deviceNum;
									var str = "";
									var btn = "";
									if (result.data.records[j].stauts == 0) {
										str = '<span class="mui-badge mui-badge-danger" id="badge' + result.data.records[j].id + '">?</span>';
										btn = '<button type="button" class="mui-btn mui-btn-success" style="width:100%;" id="' + result.data.records[j].id + '">处理</button>';
									}
									var html = '<a class="mui-navigate-right" href="#">' +
										str +
										deviceNum + '</a><div class="mui-collapse-content">' +
										result.data.records[j].content + '<p>from ' +
										result.data.records[j].ip + ' at ' +
										new Date(result.data.records[j].createTime).Format("yyyy-MM-dd hh:mm:ss") +
										'</p>' +
										btn +
										'</div>';

									var div = document.createElement('li');
									div.className = "mui-table-view-cell mui-collapse";
									div.innerHTML = html;
									table.appendChild(div);
								}
								page++;
								mui('#load').pullRefresh().endPullupToRefresh(false);
								mui('#load').pullRefresh().refresh(true);
								mui('#load').pullRefresh().enablePullupToRefresh();
								if (result.data.records.length < 9) {
									mui('#load').pullRefresh().disablePullupToRefresh();
								}
							} else {
								mui('#load').pullRefresh().disablePullupToRefresh();
								mui('#load').pullRefresh().endPullupToRefresh(true);
							}
						}
					}
				});
		}
		
		
		mui(".mui-table-view").on('tap', '.mui-btn-success', function() {
			//获取id
			var id = this.getAttribute("id");
			mui.confirm('标记为已处理吗？', '提示', ['确认', '取消'], function(e) {
				if (e.index == 0) {
					mui.ajax(config.config.path + "/feedback/" + id, {
						dataType: 'json', //服务器返回json格式数据
						type: 'PUT', //HTTP请求类型
						success: function(data) {
							document.getElementById(id).style.display = "none";
							document.getElementById("badge"+id).style.display = "none";
						},
						error: function(xhr, type, errorThrown) {}
					});
				} 
			}, 'div');
		});
	</script>
</html>
